<template>
	<view class="content f fv">
		<view class="top-bar f fac">
			<view @click="toRegister">注册</view>
		</view>
		<view class="logo f fac fpc">
			<image src="../../static/images/index/logo.png" mode=""></image>
		</view>
		<view class="main">
			<view class="login">登录</view>
			<view class="sence">你好，欢迎来到YK</view>
		</view>
		<view class="form">
			<input type="text" v-model="form.email" placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" placeholder="请输入邮箱" />
			<view class="password">
				<input v-model="form.password" maxlength="12" :password="!showPassWord" placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" placeholder="请输入密码" />
				<image src="../../static/images/sign/look.png" v-if="showPassWord" @click="showPassWord = false"></image>
				<image src="../../static/images/sign/biyan.png" v-else @click="showPassWord = true"></image>
			</view>
		</view>
		<button class="login-btn f fac fpc" @click="login">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					email: "",
					password: ""
				},
				showPassWord: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.form = uni.getStorageSync("ep") ? JSON.parse(uni.getStorageSync("ep")) : {email: "", password: ""}
		},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},
			// 登录
			login() {
				if (!this.form.email || !this.form.password) return false
				this.$request({
					url: "account/login",
					method: "POST",
					data: this.form,
					isLoading: true
				}).then(res => {
					uni.setStorageSync("ep", JSON.stringify(this.form))
					uni.setStorageSync("token", res.data.token)
					uni.reLaunch({
						url: "/pages/index/index"
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;
	padding: 0 58rpx;
	.top-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 88rpx;
		background-color: $uni-bg-color;
		box-sizing: content-box;
		padding-top: var(--status-bar-height);
		view {
			width: 100%;
			text-align: right;
			padding: 18rpx 56rpx;
		}
	}
	.logo {
		margin-top: 168rpx; // 88(导航栏高度) + 80
		image {
			width: 192rpx;
			height: 92rpx;
			
		}
	}
	.main {
		margin-top: 56rpx;
		.login {
			font-size: 56rpx;
			color: $uni-text-color;
			font-weight: 500;
			margin-bottom: 14rpx;
		}
		.sence {
			font-size: 40rpx;
			color: rgba(39,40,50,0.50);
		}
	}
	.form {
		margin-top: 68rpx;
		.password {
			position: relative;
			image {
				position: absolute;
				right: 0rpx;
				top: 32rpx;
				width: 32rpx;
				height: 18rpx;
			}
		}
		input {
			border-bottom: 1px solid #eee;
			font-size: 36rpx;
			color: $uni-text-color;
			padding: 14rpx 0;
			margin-bottom: 16rpx;
			&:focus {
				border-bottom: 1px solid $uni-color-primary;
			}
		}
	}
	.login-btn {
		margin-top: 120rpx;
		width: 520rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: $uni-color-primary;
		border: none;
		box-shadow: 0px 25px 16px -18px rgba(255,228,49,0.4);
		font-size: 32rpx;
		&::after {
			border: none !important;
		}
	}
}
</style>